<template>
	<view class="mine-tel">
		<view class="top-nav">
			<view @click="backBtn">返回</view>
			<view>工作联系电话</view>
			<view></view>
		</view>
		<view class="search">
			<input type="text" value="" placeholder="请输入姓名或手机号" v-model="inputValue"/>
			<button @click="search()">查询</button>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<text>{{item.station}}</text>
				<text>{{item.username}}</text>
				<text>{{item.phone}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default{
		data(){
			return{
				inputValue:'',
				list:[],
				baseUrl:"http://weixiaokong.91xiaokong.com/jeecg-boot/",
				
			}
		},
		onLoad() {
			_this = this;
		},
		methods:{
			// 返回按钮
			backBtn(){
				uni.navigateBack({
						delta:1
				})
			},
			search(){
				uni.request({
					url:_this.baseUrl+'api/rescue/memberlist',
					data:{
						phone:`*${_this.inputValue}*`,
						username:`*${_this.inputValue}*`
					},
					success(res) {
						_this.list = res.data.result.records
					},
					fail(err) {
						console.log(err)
					}
				})
			},
		},
	}
</script>

<style>
	.mine-tel{
		background-color: #CCCCCC;
	}
	.top-nav {
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.search{
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	.search input{
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 30rpx;
		padding: 0 20rpx;
		margin: auto;
	}
	.search button{
		background-color: #1AAD19;
		color: #FFFFFF;
		width: 120rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 0;
		height: 60rpx;
		margin: auto;
	}
	.list{
		height: 1200rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.list-item{
		padding: 20rpx;
		display: flex;
		justify-content: left;
	}
	.list-item text{
		margin-right: 10rpx;
	}
</style>
